<template>
  <div class="TagManage">
    <!--t添加删除按钮-->
    <div class="buttonGroup">
      <span>标签列表</span>
    </div>
    <!--标签列表-->
    <div class="TagManagList">
      <!--<Tabs size="small"  >-->
      <!--<TabPane   v-for="(item,index) in TagManagList"   :label=item.title    style="text-align: left" @click="getTagChild(item.id)">-->
      <!--<ul>-->
      <!--<li>1235414678</li>-->
      <!--<li>1235414678</li>-->
      <!---->
      <!--</ul>-->
      <!--</TabPane>-->
      <!--</Tabs>-->

      <!-- <ul  class="tagList">
        <li   v-for="(item,index) in TagManagList" @click="getTagChild(item.id,index)"    :class="{unactive:isRestReasonActive !=index,active:isRestReasonActive ==index}" style="cursor: pointer">
          <span> {{item.title}}</span>
         </li>
      </ul>
      <ul class="TagChild">
        <li  v-for="(item,index) in TagChildList">
          <span> {{item.studentId}}</span>
         </li>
      </ul> -->
      <Tabs @on-click="getTagChild">
          <TabPane  v-for="(item,index) in TagManagList " :label="item.title" size="small"  :key="item.title" :name="item.id">
              <p class="student_tiem" v-for="(itemChild,index) in TagChildList" :value="itemChild.studentId" :key="itemChild.studentId">学生ID：{{itemChild.studentId}}</p>
          </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
  import TagManag from "service/tagGroup.js";

  export default {

    data() {
      return {
        TagManagList: [],
        TagChildList: [],//学生列表
        TagManagListData: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park'
          },
        ],
      }
    },
    computed: {},
    created() {
    },
    methods: {
      getTagChild(id) {
        this.TagChild(id);
      },
      //获取所有标签
      async getAddTag() {
        let jsondata = await TagManag.getAddTag()
        if (!jsondata) {
          jsondata = ''
        }
        for (let i = 0; i < jsondata.data.length; i++) {
          this.TagManagList.push({
            id: jsondata.data[i].id,
            title: jsondata.data[i].name
          })
        }
        //默认之行一次获取第一个标签学生id
        if(this.TagManagList.length){
           this.TagChild(this.TagManagList[0].id);
        }
      },
      //获取标签下的学生
      async TagChild(id) {
        let jsondata = await TagManag.TagChild({
          'tagId': id,
        })
        if (!jsondata) {
          jsondata = ''
        }
        this.TagChildList=jsondata.data
        console.log(this.TagChildList)
      },
    },
    mounted: function () {
      this.getAddTag()

    }
  };
</script>
<style scoped>
  .TagManage {
    width: 100%;
  }

  .buttonGroup {
    width: 100%;
    height: 30px;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
  }
  .tagList{
    width: 100%;
    height: 30px;

    border-bottom: 1px solid #80848f;
  }

  .tagList  li {
    height: 100%;
    float: left;
    margin-left: 10px;
  }
  .tagList  li  span{
    margin: 3px;
  }
  .TagChild{
    width: 100%;
  }
  .TagChild  li {
    float: left;
    margin-left: 10px;
  }
  .unactive{

  }
  .active{
    border-bottom: 2px solid  #2d8cf0;
  }
  .student_tiem{
    text-align: left;
    padding-left:15px;
  }
</style>
